<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
详见官方文档：
<a href="https://cn.vuejs.org/v2/guide/transitions.html">
    https://cn.vuejs.org/v2/guide/transitions.html
</a>
<div id="app">
    <a href="" @click.prevent="flag=!flag">点击我</a>
    <!-- 1.使用transition元素，把需要被动画控制的元素，包起来 -->
    <!-- 2.使用name属性来指定特定的css样式 -->
    <transition name="balala">
        <h3 v-if="flag">{{name}}</h3>
    </transition>
</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            name:"hello，vue",
            flag:false
        }
    })
</script>
<style>
    .balala-enter,.balala-leave-to{
        opacity: 0;
    }

    .balala-enter-active,.balala-leave-active{
        transition:all 1s ease;
    }
</style>
</html>